import React, { useState, componentDidMount, useEffect } from 'react';
import './CartProduct.css'
import { Checkbox ,Dialog,Toast} from 'antd-mobile'

const CartProduct = (props) => {

    const { productList = [] } = props
    const [num, setNum] = useState([])
    const [productSelect,setProductSelect] = useState([])
    const [totalPrice,setTotalPrice] = useState(0)
    useEffect(() => {
        let newNum = []
        let newArr = []
        for (let i = 0; i < productList.length; i++) {
            newNum[i] = 1
        }
        for(let i = 0; i<productList.length; i++) {
            newArr[i] = false
        }
        setNum(newNum)
        setProductSelect(newArr)
    }, []);

    // 增加商品数量
    const addProductNum = (index,price) => {
        let newArr = [...num]
        newArr[index] = newArr[index] + 1
        if(productSelect[index]) {
            // 选中状态下商品数量增加重新计算total
           let newTotal = totalPrice + price
           setTotalPrice(newTotal)
        }
        setNum(newArr)
        
    }

    // 减少商品数量
    const reduceProductNum = (index,price) => {
        let newArr = [...num]
        if (newArr[index] == 1) {
            return
        }
        newArr[index] = newArr[index] - 1

        if(productSelect[index]) {
            // 选中状态下商品数量增加重新计算total
           let newTotal = totalPrice - price
           setTotalPrice(newTotal)
        }
        setNum(newArr)
    }
    // checkBox 
    const checkBoxChange = (checked,index,price)=>{
        // console.log('check',checked,index,price);
        if(checked) {
            // 如果是选中状态
            let testArr = [...productSelect]
            testArr[index] = true
            let total =totalPrice+ price*num[index]

            setTotalPrice(total)
            setProductSelect(testArr)
        }else{
            let total = totalPrice - price*num[index]
            let testArr = [...productSelect]
            testArr[index] = false
            setTotalPrice(total)
            setProductSelect(testArr)
        }
    }

    // 用户点击删除按钮
    const deleteProduct = ()=>{
        // 将这个商品从 store 中移除，重新渲染
        // 先把这个 productSelect[index] 设置为false,计算总价格无需算入它
        // num,productSelect 两个数组长度要改变
    }

    // 用户点击下单按钮
    const buyProduct = async (totalPrice)=>{
      const result =  await Dialog.confirm({
            content: `你需要支付${totalPrice}元,确认支付?`,
          })
          if (result) {
            //   支付成功，把选中的商品从store 中移除
            // 还没写
            Toast.show({ content: '支付成功！', position: 'bottom' })
          } else {
            Toast.show({ content: '取消支付', position: 'bottom' })
          }
    }
    return (
        <div className='cartProduct-container'>

            {
                productList.map((item, index) => {
                    return (
                        <div className="cartProduct-item" key={index}>
                            <div className="productItem-left">
                                <Checkbox onChange={(checked)=>checkBoxChange(checked,index,item.productPrice)}></Checkbox>
                            </div>
                            <div className="productItem-right">
                                <div className="product-storeName">
                                    <span>
                                        <i className='iconfont'>&#xe736;</i>
                                        <i>{item.storeName}</i>
                                        <i className='iconfont'>&#xe629;</i>
                                    </span>
                                    <span onClick ={()=>deleteProduct()}>
                                        <i className='iconfont'> &#xe60b;</i>
                                    </span>
                                </div>
                                <div className="product-info">
                                    <div className="product-img">
                                        <img src={item.productAvatar.imgUrl} alt="" />
                                    </div>
                                    <div className="product-detail">
                                        <div className="product-name">
                                            {item.productName}
                                        </div>
                                        <div className="product-specification">
                                            这是商品的规格
                                        </div>
                                        <div className="product-priceNum">
                                            <div className="product-price">
                                                <span>￥</span>
                                                <span>{item.productPrice}</span>
                                            </div>
                                            <div className="procuct-num">
                                                <span onClick={() => reduceProductNum(index,item.productPrice)}>-</span>
                                                <span>{num[index]}</span>
                                                <span onClick={() => addProductNum(index,item.productPrice)}>+</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })
            }


            <div className='productTotal-container'>
                <div className="product-select">
                    <span>已选(1)</span>
                    <span>合计 ￥{totalPrice}</span>
                </div>
                <div className="product-ordered" onClick={()=>buyProduct(totalPrice)}>
                    下单
                </div>
            </div>
        </div>
    );
}

export default CartProduct;
